<template>
  <div id="user-admin">
    <advance-table
      :columns="columns"
      :data-source="users.data"
      title="用户管理"
      :loading="false"
      rowKey="id"
      @search="onSearch"
      @refresh="onRefresh"
      :format-conditions="true"
      @reset="onReset"
      :pagination="{
        current: page,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) =>
          `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }"
    >
      <template slot="action">
        <a href="#" @click="$message.success('点击了')">详情</a>
      </template>
    </advance-table>
    <!-- <api /> -->
  </div>
</template>

<script>
import AdvanceTable from "@/components/table/advance/AdvanceTable";
import {mapState} from 'vuex'
const columns = [
  {
    title: "用户id",
    dataIndex: "id",
  },
  {
    title: "用户名",
    dataIndex: "username",
  },
  {
    title: "地址",
    dataIndex: "user_address",
  },
  {
    title: "操作",
    dataIndex: "key",
    scopedSlots: { customRender: "action" },
  },
];

const dataSource = [];

for (let i = 0; i < 100; i++) {
  dataSource.push({
    key: i,
    id: i,
    username: "mozz",
    user_address: "0x78ebe88b6DA6F79d851979CD349231937eEB9c53",
  });
}
export default {
  name: "Table",
  components: { AdvanceTable },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: columns,
      dataSource: dataSource,
      conditions: {},
    };
  },
  methods: {
    getGoodList() {},
    getColumns() {},
    onSearch(conditions, searchOptions) {
      console.log(searchOptions);
      this.page = 1;
      this.conditions = conditions;
      this.getGoodList();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.getGoodList();
    },
    onRefresh(conditions) {
      this.conditions = conditions;
      this.getGoodList();
    },
    onReset(conditions) {
      this.conditions = conditions;
      this.getGoodList();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.getGoodList();
    },
  },
  mounted(){
    this.$store.dispatch('users',{pageIndex:this.page.toString(), pageSize:this.pageSize.toString()})
  },
  watch:{
    users(newValue){
      this.total = newValue.count
    }
  },
  computed:{
    ...mapState({
      users:store=>store.users.users
    })
  }

};
</script>

<style lang='less' scpoed>
#user-admin {
  .status-text {
    display: inline-block;
    padding: 5px 8px;
    color: #fff;
    border-radius: 99px;
    font-size: 12px;
    white-space: nowrap;
  }
  .status-finish {
    background: var(--themeColor1);
  }
  .status-ready {
    background: var(--themeColor4);
  }
  .status-audit {
    background: var(--themeColor2);
  }
  .action-btn {
    white-space: nowrap;
  }
}
</style>